<template>
	<ui-sys img="https://cos.color-ui.com/img/4put2.png" tabbar>
		<ui-navbar :back="false" opacity>
			<view class="flex-center flex-sub" v-if="sys_scrollTop > sys_navBar">我的</view>
		</ui-navbar>
		<view class="ui-container">
			<view v-if="isLogin" class="flex-bar my-4" >
				<ui-avatar ui="xxl ellipse" :src="userInfo.avatarUrl"></ui-avatar>
				<view class="flex-sub pl-3">
					<view class="text-xl">{{userInfo.nickName}}</view>
					<view class="text-sm">{{userInfo.slogan}}</view>
				</view>
			</view>
			<view class="page-card-box" @click="_to('/pages/login/login')" v-else>
				<view class="bg-blue-gradient shadow-blur page-card-view">
					<view class="left-view">
						<view class="text-bold text-lg">登陆查看更多功能</view>
						<view class="text-sm mt-3">CodeWord做您私人的学习管家</view>
					</view>
					<view class="right-view">
						<image src="/static/tab_icon/test_cur.png" mode="aspectFill" />
						<view class="text-sm text">CodeWord</view>
					</view>
				</view>
				<view class="bg-white shadow-lg page-card-sub">
					<text class="cicon-evaluate text-grey" />
					<text class="text-sm ml-3 text-grey text">天再高又怎样,踮起脚尖就更接近阳光。</text>
				</view>
			</view>

			<ui-menu ui="mt-5 radius border">
				<ui-menu-item arrow title="我的资料" icon="cicon-github"></ui-menu-item>
				<ui-menu-item arrow title="申请认证出题人" icon="cicon-crown"></ui-menu-item>
				<ui-menu-item arrow title="设置" icon="cicon-set" @click.native="_to('/pages/my/set')"></ui-menu-item>
				<ui-menu-item arrow title="关于" icon="cicon-info"></ui-menu-item>
			</ui-menu>
		</view>
		<ui-fixed bottom v-if="isLogin">
			<view class="p-5 login-out">
				<button class="ui-btn bg-red radius lg block shadow-red" @tap="loginOut()">
					<text class=" icon-xl mr-3"></text>
					退出登陆
				</button>
			</view>
		</ui-fixed>
	</ui-sys>
</template>

<script>
	import {
		getStorageUserInfo,
		removeAllStorage
	} from '@/utils/storageUtils.js'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: null
			};
		},
		onLoad() {
			this.checkLogin()
		},
		methods: {
			checkLogin(){
				this.userInfo = getStorageUserInfo()
				if (this.userInfo != null) {
					this.isLogin = true
				} else {
					this.isLogin = false
				}
			},
			// 退出登陆
			loginOut(){
				removeAllStorage()
				uni.reLaunch({
					url:'/pages/my/home'
				})
			}
		}
	};
</script>

<style lang="scss">
	.page-card-box {
		position: relative;
		margin: 5rpx 20rpx 60rpx;

		.page-card-view {
			position: relative;
			padding: 20rpx 30rpx;
			border-radius: 24rpx;
			display: flex;
			z-index: 2;

			&:after {
				position: absolute;
				content: "";
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(20px);
				-webkit-backdrop-filter: blur(20px);
				border-radius: 24rpx;
				border: 1px solid rgba(255, 255, 255, 0.18);
				z-index: -1;
			}

			.left-view {
				position: relative;
				height: 202rpx;
				padding: 20rpx 0;
				flex: 1;
			}

			.right-view {
				position: relative;
				height: 202rpx;
				width: 180rpx;
				text-align: center;
				margin-left: 90rpx;

				image {
					position: absolute;
					width: 260rpx;
					height: 260rpx;
					top: -85rpx;
					left: -40rpx;
					filter: drop-shadow(var(--ui-Shadow-lg));
					-webkit-filter: drop-shadow(var(--ui-Shadow-lg));
				}

				.text {
					position: absolute;
					bottom: 8rpx;
					width: 100%;
				}

				&:before {
					position: absolute;
					content: "";
					height: 190rpx;
					width: 2rpx;
					left: -40rpx;
					top: 33rpx;
					background-image: linear-gradient(0deg, #ffffffbf, #0166eb00);
				}
			}
		}

		.page-card-sub {
			position: relative;
			margin: 0 40rpx;
			padding: 18rpx 30rpx;
			border-radius: 0 0 30rpx 30rpx;
			z-index: 1;

			text {
				z-index: 3;
			}
		}
	}
.login-out{
	margin-bottom: 80rpx;
}
</style>
